<template>
  <div class="address">
    <my-header title="选择收货地址" :showLeft="true"></my-header>
    <div class="city_search">
      <div class="search">
        <span @click="$router.push('/city')">
          {{ city }}
          <i class="fa fa-angle-down"></i>
        </span>
        <i class="fa fa-search"></i>
        <input type="text" v-model="search_val" placeholder="小区/写字楼/学校等">
      </div>
      <location :address="getAddress" @click.native="selectPosition()"></location>
    </div>
    <div class="area">
      <ul class="areaList" v-for="(item,index) in areaList" :key="index" @click="selectPosition(item)">
        <li>
          <h3>{{ item.name }}</h3>
          <span>{{ item.district }}{{ item.address }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import MyHeader from '@/components/Header/Header.vue'
import Location from '@/components/Location/Location.vue'

export default {
  name: 'MyAddress',
  components: {
    MyHeader,
    Location
  },
  computed: {
    getAddress() {
      return this.$store.getters.location.formattedAddress
    }
  },
  data() {
    return {
      city: '',
      // 表单 v-model 双向绑定
      search_val: '',
      // 定位数组
      areaList: []
    }
  },
  watch: {
    // 监听表单中数据的变化
    search_val() {
      this.searchPlace()
    }
  },
  methods: {
    // 表单中一输入值就定位
    searchPlace() {
      const self = this
      // console.log(this.search_val);
      AMap.plugin('AMap.Autocomplete', function() {
        // 实例化Autocomplete
        const autoOptions = {
          // city 限定城市，默认全国
          city: self.city
        }
        const autoComplete = new AMap.Autocomplete(autoOptions)
        autoComplete.search(self.search_val, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          self.areaList = result.tips
        })
      })
    },
    // 把我们选中的地址保存到vuex中里面去
    selectPosition(item) {
      if (item) {
        this.$store.dispatch('setAddress', item.district + item.address + item.name)
      }
      else {
        this.$store.dispatch('setAddress', this.getAddress)
      }
      this.$router.push('/home')
    }
  },
  // // 组件内守卫
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.city = to.params.city
    })
  }
}
</script>

<style lang="less" scoped>
.city_search {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  .search {
    background-color: #ddd;
    border-radius: 8px;
    margin: 10px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    color: #333;
    .fa-search {
      &:before {
        margin: 0 5px 0 8px;
      }
    }
    input {
      border: none;
      outline: none;
      background-color: #ddd;
    }
  }
}
.area {
  background-color: #fff;
  .areaList {
    padding: 0 25px;
    li {
      padding: 10px 0;
      line-height: 1.2;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      h3 {
        font-size: 18px;
        padding: 5px 0;
      }
      span {
        display: inline-block;
        color: #666;
        width: 320px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
